<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>ajax 的请求流程 (6行代码) </h2>
        <button id="btn">获取数据</button>
    </div>

    <script>
        // ajax 必须需要一个服务器的环境  (Live Server 起服务 本地的假服务 )

        // xhr.readyState 请求的状态
        //  0 请求未初始化 (只是创建了请求,还未进行任何的操作)
        //  1 请求已经建立，但是还没有发送 ,只是配置了请求相关的数据信息 
        //  2 请求已经发送  但是正在出来中  (获取一些响应头数据 )
        //  3 后端正在处理数据中, 通常来说 已经有部分响应的数据可以使用  但是服务器还没有完全完成数据的响应  
        //  4 响应已经完成  返回响应的结果  (请求成功 请求失败  服务器异常 success fail )

        // xhr.status  服务器返回给客户端 响应状态码 (HTTP状态码)
        // 1**	信息，服务器收到请求，需要请求者继续执行操作   pending 
        // 2**	成功，操作被成功接收并处理
        // 3**	重定向，需要进一步的操作以完成请求
        // 4**	客户端错误，请求包含语法错误或无法完成请求
        // 5**	服务器错误，服务器在处理请求的过程中发生了错误
        
        // 200 : ok ajax请求正常打开 并且得到完整的响应数据
        // 301 : 被请求的资源数据已经永久的异动到新位置   重定向
        // 302 : 被请求的资源数据已经临时从不同的URL 响应请求
        // 304 : 缓存
        // 404 : ajax请求不存在 
        // 403 : 权限不够禁止访问
        // 500 : 服务器端代码出现错误
        // 503 : 服务器维护或者过载现象  服务器当前无法处理请求 


        // xhr.responseText 返回的响应文本数据 
        // xhr.statusText  状态文本 
        // NETwork --->  xhr 

        var btn = document.getElementById("btn")
        btn.onclick = function(){
            // 1. 创建 ajax 请求对象(构造函数创建)
            var xhr = new XMLHttpRequest()   // XMLHttpRequest 语法API官方提供
            console.log(xhr)
            console.log(xhr.readyState)    //  0  请求未初始化 (只是创建了请求,还未进行任何的操作 open)

            // 2. 配置了请求相关的数据信息
            // xhr.open(type,url,bool)
            // type 请求方式  (get post)
            // url  请求地址  (数据)
            // bool 是否异步  (默认 true 异步)

            xhr.open('get',"../data/demo.txt",true);
            console.log(xhr.readyState)      // 1  请求已经建立，但是还没有发送

            // 3. 发送请求
            xhr.send()
            console.log(xhr.readyState)      // 1 (异步原因导致  以后讲解异步同步区别)
            
            // 4. 等待服务器(后端) 响应
            // 绑定事件  监听 xhr.readyState 改变  ==> 当 xhr.readyState会触发这个事件 
            xhr.onreadystatechange  = function(){
                console.log("请求的状态的改变: " + xhr.readyState)
                // xhr.readyState == 3 请求等待中  等待返回最后的结果 
                // xhr.readyState == 4 请求已完成 有响应数据
                
                // xhr.status == 200  响应的数据就是  成功
                console.log(xhr.status)
                if(xhr.readyState == 4 && xhr.status == 200){
                    // ajax 请求后端 后端返回的响应的数据 (Text JSON HTML XML)
                    console.log(xhr.responseText)  // 返回的数据 
                }
            }
        }
    </script>
</body>
</html>